<template>
  <q-card>
    <q-card-section class="row">
      <div class="text-h6">{{ todo.id ? '编辑' : '新增' }}</div>
      <q-space />
      <q-btn flat round dense v-close-popup icon="close" />
    </q-card-section>

    <q-form @submit="onSubmit" @reset="onReset" ref="form">

      <q-card-section class="q-gutter-sm">
        <q-input v-model="todo.名称" outlined label="名称" lazy-rules :rules="[val => val && val.length > 0 || '请写点东西']"
          clearable autofocus v-a全选/>
        <q-input outlined v-model="todo.到期日期" label="到期日期" clearable>
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
                <q-date v-model="todo.到期日期">
                  <div class="row items-center justify-end">
                    <q-btn v-close-popup label="Close" color="primary" flat />
                  </div>
                </q-date>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
        <q-input outlined v-model="todo.到期时间" label="到期时间" clearable >
          <template v-slot:append>
            <q-icon name="access_time" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
                <q-time v-model="todo.到期时间" format24h >
                  <div class="row items-center justify-end">
                    <q-btn v-close-popup label="Close" color="primary" flat />
                  </div>
                </q-time>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn label="保存" type="submit" color="primary" />
        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
      </q-card-actions>

    </q-form>
  </q-card>

</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useTodo } from './todo-store'
import { ref } from 'vue';
const store = useTodo()
const { save1 } = store
const { todo } = storeToRefs(store)
const form = ref(null)

function onSubmit() {
  form.value.validate().then(success => {
    if (success) {
      // model 数据验证通过
      save1()
    }
    else {
      // 数据验证失败
      // 用户至少输入了一个无效值
    }
  })


}

function onReset() {

}
</script>
